<template>
  <div>
    <el-dialog
      title=""
      :visible.sync="dialogVisible"
      :width="!isMobile ? '50%' : '90%'"
      class="searchDialog"
      @open="StartSearch"
      @close="closeSearchDialog"
    >
      <div slot="title">
        <el-input
          v-model="searchContent"
          class="searchInput"
          @keyup.enter.native="StartSearch"
          @change="StartSearch"
          placeholder="请搜索"
        ></el-input>
      </div>
      <div class="search-container" v-loading="loading">
        <el-collapse v-model="activeName" @change="StartSearch" accordion>
          <el-collapse-item title="用户" v-loading="loading" name="1">
            <div class="search-content" v-if="userList.length">
              <SearchUserCard v-for="i in userList" :key="i.id" :user="i" />
              <el-link
                class="loadmore"
                :underline="false"
                v-if="!isDone"
                @click="LoadMore"
                type="info"
              >
                <img src="@/assets/img/svg/down.svg" />
              </el-link>
            </div>
            <div v-else class="empty-content">
              无法搜索到更多数据
            </div>
          </el-collapse-item>
          <el-collapse-item
            v-if="openingModuleList.find(item => item == 'article')"
            title="博客"
            name="2"
          >
            <div class="search-content" v-if="articleList.length">
              <ArticleCard v-for="i in articleList" :key="i.id" :article="i" />
              <el-link
                class="loadmore"
                :underline="false"
                v-if="!isDone"
                @click="LoadMore"
                type="info"
              >
                <img src="@/assets/img/svg/down.svg" />
              </el-link>
            </div>
            <div v-else class="empty-content">
              无法搜索到更多数据
            </div>
          </el-collapse-item>
          <el-collapse-item
            v-if="openingModuleList.find(item => item == 'musicScore')"
            title="乐谱"
            name="3"
          >
            <div class="search-content" v-if="musicScoreList.length">
              <MusicScoreCard
                v-for="i in musicScoreList"
                :musicScore="i"
                :key="i.id"
              />
            </div>
            <div v-else class="empty-content">
              无法搜索到更多数据
            </div>
          </el-collapse-item>
          <el-collapse-item
            v-if="openingModuleList.find(item => item == 'video')"
            title="视频"
            name="4"
          >
            <div class="search-content" v-if="videoList.length">
              <div v-for="i in videoList" :key="i.id" class="video-wrapper">
                <VideoCard :video="i" />
              </div>
              <el-link
                class="loadmore"
                :underline="false"
                v-if="!isDone"
                @click="LoadMore"
                type="info"
              >
                <img src="@/assets/img/svg/down.svg" />
              </el-link>
            </div>
            <div v-else class="empty-content">
              无法搜索到更多数据
            </div>
          </el-collapse-item>
          <el-collapse-item
            v-if="openingModuleList.find(item => item == 'document')"
            title="文档"
            name="5"
          >
            <div class="search-content" v-if="documentList.length">
              <DocumentManageCard
                v-for="i in documentList"
                :document="i"
                :isEdit="false"
                :key="i.id"
              />
              <el-link
                class="loadmore"
                :underline="false"
                v-if="!isDone"
                @click="LoadMore"
                type="info"
              >
                <img src="@/assets/img/svg/down.svg" />
              </el-link>
            </div>
            <div v-else class="empty-content">
              无法搜索到更多数据
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ArticleCard from '@/components/Article/ArticleCard'
import MusicScoreCard from '@/components/MusicScore/MusicScoreCard'
import VideoCard from '@/components/Video/VideoCard'
import SearchUserCard from './SearchUserCard.vue'
import DocumentManageCard from '@/components/Document/DocumentManageCard'
export default {
  props: {
    ShowSearchDialogVisible: {
      type: Boolean,
      required: true
    }
  },
  components: {
    ArticleCard,
    VideoCard,
    SearchUserCard,
    DocumentManageCard,
    MusicScoreCard
  },
  data() {
    return {
      // 对话框显示标志位
      dialogVisible: false,
      searchContent: '',
      activeName: '1',
      // 单页限制
      limit: 5,
      page: 1,
      // 搜索结果
      documentList: [],
      articleList: [],
      userList: [],
      musicScoreList: [],
      videoList: [],
      loading: false,
      isDone: false,
      openingModuleList: []
    }
  },
  computed: {
    isMobile() {
      return this.$data.isMobile
    }
  },
  watch: {
    ShowSearchDialogVisible: {
      immediate: true,
      handler(val, oldval) {
        this.dialogVisible = val
      }
    }
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.SelectSearch(this.activeName)
      // 获取以开启的模块开关
      this.getOpeningModuleSwitch()
    })
  },
  methods: {
    // 关闭窗口回调
    closeSearchDialog() {
      this.dialogVisible = false
      // 触发自定义关闭窗口回调
      this.$emit('closeSearchDialog')
    },
    StartSearch() {
      // 初始化
      this.page = 1
      this.isDone = false
      this.loading = true
      // 清空列表数组
      this.documentList = []
      this.articleList = []
      this.userList = []
      this.musicScoreList = []
      this.videoList = []
      this.SelectSearch(this.activeName)
    },
    // 搜索功能
    SelectSearch(index) {
      console.log(index)
      let type = ''
      // this.page = 1
      this.loading = true
      switch (index) {
        // 搜索用户
        case '1':
          this.StartSearchUser()
          break
        // 搜索博客
        case '2':
          this.StartSearchArticle()
          break
        // 搜索乐谱
        case '3':
          this.StartSearchMusicScore()
          break
        // 搜索视频
        case '4':
          this.StartSearchVideo()
          break
        // 搜索文档
        case '5':
          this.StartSearchDocument()
          break
      }
      this.loading = false
    },
    // 获取已开启的模块开关
    async getOpeningModuleSwitch() {
      const res = await this.$API.auth.getOpeningModuleSwitch()
      if (res.status == 200) {
        this.openingModuleList = res.data.map(item => {
          return item.module_name
        })
        // 存储到vuex
        this.$store.commit('paid/SETOPENINGMODULELIST', this.openingModuleList)
      }
    },
    // 搜索文章
    async StartSearchArticle() {
      const { searchContent, limit, page } = this
      let res
      if (!searchContent) {
        res = await this.$API.article.getArticleList(limit, page)
      } else {
        res = await this.$API.search.searchArticle(searchContent, limit, page)
      }
      if (!res.data) {
        this.isDone = true
        return
      }
      if (res.status == 200) {
        // 将获取的数据追加到 articleList 数组中
        this.articleList = [...this.articleList, ...res.data.payload]
      }
    },
    // 搜索用户
    async StartSearchUser() {
      const { searchContent, limit, page } = this
      let res
      if (!searchContent) {
        res = await this.$API.user.getUserList(limit, page)
      } else {
        res = await this.$API.search.searchUser(searchContent, limit, page)
      }
      if (!res.data) {
        this.isDone = true
        return
      }

      if (res.status == 200) {
        this.userList = res.data.payload
      }
    },
    // 搜索乐谱
    async StartSearchMusicScore() {
      const { searchContent, limit, page } = this
      let res
      if (!searchContent) {
        res = await this.$API.musicScore.getMusicScoreList(limit, page)
      } else {
        res = await this.$API.search.searchMusicScore(
          searchContent,
          limit,
          page
        )
      }
      if (!res.data) {
        this.isDone = true
        return
      }
      if (res.status == 200) {
        this.musicScoreList = res.data.payload
      }
    },
    // 搜索文档
    async StartSearchDocument() {
      const { searchContent, limit, page } = this
      let res
      if (!searchContent) {
        res = await this.$API.document.getDocumentList(limit, page)
      } else {
        res = await this.$API.search.searchDocument(searchContent, limit, page)
      }
      if (!res.data) {
        this.isDone = true
        return
      }
      if (res.status == 200) {
        this.documentList = res.data.payload
      }
    },
    // 搜索视频
    async StartSearchVideo() {
      const { searchContent, limit, page } = this
      let res
      if (!searchContent) {
        res = await this.$API.video.getVideoList(limit, page)
      } else {
        res = await this.$API.search.searchVideo(searchContent, limit, page)
      }
      if (!res.data) {
        this.isDone = true
        return
      }
      if (res.status == 200) {
        this.videoList = res.data.payload
      }
    },
    // 获取更多
    LoadMore() {
      this.page++
      this.SelectSearch(this.activeName)
    }
  }
}
</script>

<style scoped>
.searchDialog >>> .el-dialog {
  border-radius: 12px;
}
.searchInput >>> .el-input__inner {
  background-color: #f4f5f5;
  margin-top: 30px;
  color: #6e7073;
}
.search-content {
  max-height: 300px;
  overflow: auto;
  /* display: flex;
  flex-wrap: wrap;
  justify-content: center; */
}
.empty-content {
  width: 100%;
  display: flex;
  height: 5rem;
  text-align: center;
  flex-direction: column;
  justify-content: center;
}
.emptyImg {
  width: 50%;
  height: 50%;
  margin: auto auto;
}
.loadmore {
  width: 100%;
  text-align: center;
}
.video-wrapper {
  width: 100%;
  margin-top: 30px;
  border-bottom: 1px solid black;
}
</style>
